
var e1_options_dir="images/practice/ejercicio1/option";
var e2_options_dir="images/practice/ejercicio2/option";
var e3_options_dir="images/practice/ejercicio3/option";

$(document).ready(function(){


	randomize_opts(1);
	randomize_opts(2);
	randomize_opts(3);

	$("a[href='#']").click(function() {
		return false
	});

	$('#practice-nav').disableSelection();
	$('.sortable').sortable().disableSelection();

  $('.rta').droppable({
    accept: "li",
    drop: function(ev, ui) {
                    // Añado el objeto origen a la lista destino
                    $(this).append($(ui.draggable));
                    $(this).css('width','auto').css('height','auto').css('background','white');
                  }
                });

	$('.sortable').sortable().disableSelection();
  	$('.sortable li').draggable({helper:'clone'}).disableSelection();
  	$('.dropped li').draggable({helper:'clone'}).disableSelection();

  	$(".trash_list ").droppable({
  		accept: ".sortable li",
  		drop: function(ev, ui) {
                    // Añado el objeto origen a la lista destino
                    $(this).append($(ui.draggable));
                }
            });

  	$(".sortable").droppable({
  		accept: "li",
  		drop: function(ev, ui) {
                    // Añado el objeto origen a la lista destino
                    $(this).append($(ui.draggable));
                }
            });


	$('.toggle').toggle(function(){
            $('.model').animate({'left':'0%'}, 'slow');
        },function(){
            $('.model').animate({'left':'-47%'}, 'slow');
    });

	$('.practice-nav li:nth(0)').click(function(){
       $("#practice2, #practice3").addClass('hidden');
       $("#practice1").removeClass('hidden');
  });

  $('.practice-nav li:nth(1)').click(function(){
       $("#practice1, #practice3").addClass('hidden');
       $("#practice2").removeClass('hidden');
  });

  $('.practice-nav li:nth(2)').click(function(){
       $("#practice1, #practice2").addClass('hidden');
       $("#practice3").removeClass('hidden');
  });

  $('#submit1').click(function(){
        var order=$('#sortable1').attr('correct-order').split(" ");
        var elements=$('#sortable1').children();

        var index=0;
        var correct=true;

        if(elements.length>0){
          elements.each(function(){
            if($(this).attr('data-index')==order[index]){
              index++;
            }else{
              correct=false;
              return false;
            }
          });
        }else{
          correct=false;
        }

        if(!correct){
            $("#grade1").attr('src','images/bad-done.png');
            $(".practice-nav li:nth(0)").css('border-color','#cf2224');
            $(".practice-nav li:nth(0)").css('color','#cf2224');
        }else{
            $("#grade1").attr('src','images/well-done.png');
            $(".practice-nav li:nth(0)").first().css('border-color','green');
            $(".practice-nav li:nth(0)").first().css('color','green');
        }

        $("#grade1").animate({'opacity':1},'slow');
  });


  $('#clear1').click(function(){
      $("#grade1").css('opacity',0);
      var items=$("#trash_list1").children().not(".trash");
      $('#sortable1').append(items);
      $("#trash_list1").children().not(".trash").detach();
      randomize_opts(1);
  });

  $('#submit2').click(function(){

        var orderA=$('#sortable2a').attr('correct-order');
        var orderB=$('#sortable2b').attr('correct-order');

        var elementsA='';
        var elementsB='';
        var correct=false;

        $('#sortable2a li').not('img').each(function(){
          elementsA+=$(this).attr('data-index')+" ";
        });

        $('#sortable2b li').not('img').each(function(){
          elementsB+=$(this).attr('data-index')+" ";
        });

        elementsA=elementsA.substring(0,elementsA.length-1);
        elementsB=elementsB.substring(0,elementsB.length-1);

        if(elementsA===orderA && elementsB===orderB){
          correct=true;
        }

        if(!correct){
            $("#grade2").attr('src','images/bad-done.png');
            $(".practice-nav li:nth(1)").css('border-color','#cf2224');
            $(".practice-nav li:nth(1)").css('color','#cf2224');
        }else{
            $("#grade2").attr('src','images/well-done.png');
            $(".practice-nav li:nth(1)").first().css('border-color','green');
            $(".practice-nav li:nth(1)").first().css('color','green');
        }

        $("#grade2").animate({'opacity':1},'slow');
  });


  $('#clear2').click(function(){
       $("#grade2").css('opacity',0);
       var itemsA=$("#sortable2a").children().not('img');
       var itemsB=$("#sortable2b").children().not('img');
       $('#trash_list2').append(itemsA).append(itemsB);
       $("#sortable2a, #sortable2b").children().not('img').detach();
       randomize_opts(2);
  });

  $('#submit3').click(function(){

        var elements=$('.rta');
        var correct=false;

        var i=1;
        elements.each(function(){
          if($(this).attr('rta')==$(this).find('li').attr('data-index')){
            correct=true;
            i++;
          }else{
            correct=false;
            return false;
          }
        });


        if(!correct){
            $("#grade3").attr('src','images/bad-done.png');
            $(".practice-nav li:nth(2)").css('border-color','#cf2224');
            $(".practice-nav li:nth(2)").css('color','#cf2224');
        }else{
            $("#grade3").attr('src','images/well-done.png');
            $(".practice-nav li:nth(2)").first().css('border-color','green');
            $(".practice-nav li:nth(2)").first().css('color','green');
        }

        $("#grade3").animate({'opacity':1},'slow');
  });

  $('#clear3').click(function(){
       $("#grade3").css('opacity',0);
       var items=$(".rta li");
       $('#sortable3').append(items);
       $(".rta li").detach();
       randomize_opts(3);
  });
});


var randomize_opts=function(practice){
	var items;
  var limit=4;
	switch(practice){
		case 1:
			 practice=e1_options_dir;
			 items=$('#sortable1 li');
		break;
		case 2:
			practice=e2_options_dir;
			 items=$('#trash_list2 li');
       limit=8;
		break;
		case 3:
			practice=e3_options_dir;
			 items=$('#sortable3 li');
       limit=3;
		break;
	}

    var rand="";

    for (var i = 0; i < limit;) {
        append=Math.floor((Math.random()*limit)+1)+' ';
        if(rand.indexOf(append)<0){
            rand+=append;
            i++;
        }
    };

    rand=rand.substring(0,rand.length-1).split(' ');

    var i = 0;

    items.each(function(){
        $(this).attr('data-index',rand[i]);
        var img=$(this).find('img');
        img.attr('src',practice+rand[i]+".png");
        i++;
    });
}